<template>
  <div>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '100%' }"
    >
      <van-nav-bar
        class="nav"
        title="选择价格表"
        left-text="返回"
        right-text="确定"
        @click-right="onClickRight"
        left-arrow
        @click-left="onClickLeft"
      />
      <div style="height:50px"></div>
      <van-search
        class="acccc"
        placeholder="请输入价格表名称"
        @search="search"
        v-model="queryParam.Keyword"
        @clear="clear"
      />
      <ul id="UlBox" class="outerBox">
        <li class="ckbxcli" v-for="(item, index) in data" :key="index">
          <p @click="customerChoice(item, index)" style="margin-top: 8px">
            <van-field readonly v-model="item.ListName" />
            <!-- <van-field readonly label="价格:" v-model="item.GiftType" /> -->
            <!-- <van-checkbox class="checked" v-model="item.checked"></van-checkbox> -->
          </p>
        </li>
      </ul>

      <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" />
    </van-popup>
  </div>
</template>

<script>
import PaginationCom from "@/components/PaginationCom.vue";
import {
  Col,
  Cell,
  CellGroup,
  Picker,
  Popup,
  Search,
  Field,
  Loading,
  Toast,
  NavBar,
  Pagination,
  Checkbox
} from "vant";

export default {
  components: {
    PaginationCom,
    "van-checkbox": Checkbox,
    "van-nav-bar": NavBar,
    "van-pagination": Pagination,
    "van-picker": Picker,
    "van-popup": Popup, //弹层
    "van-search": Search, //搜索
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-loading": Loading
  },
  data() {
    return {
      prd: {},
      prdlist: [],
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      Total: 0,
      selectedRowKeys: [],
      queryParam: [],
      entity: {},
      judgment: true,
      data: [],
      show: false,
      Id: ""
    };
  },
  methods: {
    paginationchange(a, b) {
      this.pagination.current = a;
      this.getDataList();
    },
    //返回
    onClickLeft() {
      this.show = false;
    },
    clear() {
      this.queryParam = [];
      this.getDataList();
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "cInvName";
      this.queryParam.Keyword = value;
      this.pagination.current = 1;
      this.getDataList();
    },

    customerChoice(item, index) {
      //   console.log(item);
      this.$emit("PriceList", item);
      this.show = false;
      //   this.$set(item, "checked", !item.checked);
    },
    //选中后确定按钮
    onClickRight() {
      //   this.$emit("Rule", this.prdlist);
      this.show = false;
    },
    getDataList() {
      this.http
        .post(
          "/QuotationManagement/Quot_PriceListMain/GetDataListByConditions",
          {
            PageIndex: this.pagination.current,
            PageRows: this.pagination.pageSize,
            SortField: "Id",
            SortType: "asc",
            Search: this.queryParam,
            ...this.filters
          }
        )
        .then(resJson => {
          Toast.clear();

          this.data = resJson.Data;
          this.Total = resJson.Total;
        });
    },
    init() {
      this.show = true;
      this.prdlist = [];
    },
    openForm(CustomerId) {
      this.init();
      Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });

      if (CustomerId) {
        this.http
          .post("/ProductManagement/Inventory/GetDataListByCustomerId", {
            PageIndex: this.pagination.current,
            PageRows: this.pagination.pageSize,
            SortField: "Id",
            SortType: "asc",
            Search: { CustomerId: CustomerId },
            ...this.filters
          })
          .then(resJson => {
            Toast.clear();

            this.data = resJson.Data;
            this.Total = resJson.Total;
            console.log(this.List);
          });
      } else {
        this.getDataList();
      }
    }
  }
};
</script>

<style scoped>
.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}
.checked {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10%;
}
.outerBox {
  height: calc(100vh - 150px);
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;
}
.nav {
  position: fixed;
  width: 100%;
}
.ckbxcli {
  position: relative;
  border: 1px solid Gainsboro;
  width: 95%;
  /* height: 100px; */
  text-align: center;
  margin-left: 2%;
  margin-top: 6px;
  margin-bottom: 6px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 2px;
  cursor: pointer;
  padding-top: 6px;
  list-style-type: none;
  display: inline-block;
}
ul {
  /* margin-top: 10px; */
}
</style>
